<template>
  <div>
    <!-- 用于软磁性能的性能查询组件 -->
    <el-button type="primary" size="mini" @click="showImport()">导入</el-button>

    <el-dialog title="提示" :visible.sync="importTag" width="40%">
      <div style="font-size: 20px; margin-left: 40px">请选择导入方式进行导入</div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" style="margin:0 20px" @click="showDataImport">单个导入</el-button>
        <el-divider direction="vertical"></el-divider>
        <el-button type="primary" style="margin:0 20px" @click="batchVisible = true">批量导入</el-button>
        <el-divider direction="vertical"></el-divider>
        <el-button type="primary" style="margin:0 20px" @click="attachmentVisible = true">附件导入</el-button>
      </span>
    </el-dialog>

    <!-- 批量导入弹窗 -->
    <el-dialog title="批量导入--下载模板" :visible.sync="batchVisible" width="40%" :close-on-click-modal="false">
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" style="margin:0 20px" @click="exportData">下载模板</el-button>
        <a-upload name="file" :action="uploadUrl" accept=".xls,.xlsx" :data="paramData" :multiple="true" @change="handleChange" :showUploadList="false">
          <el-button type="primary">已有模板直接导入</el-button>
        </a-upload>
      </span>
    </el-dialog>
    <!-- 批量导入弹窗 -->

    <!-- 附件导入弹窗 -->
    <el-dialog title="附件导入--备注信息" :visible.sync="attachmentVisible" width="40%" :close-on-click-modal="false">
      <div style="margin-bottom: 15px">支持测试数据、测量仪器、文献、标准、产品手册等导入</div>
      <el-input v-if="attachmentVisible" v-model="attachmentParamData.remark"></el-input>
      <span slot="footer" class="dialog-footer">
        <a-upload name="file" :action="attachmentUploadUrl" :data="attachmentParamData" :headers="attachmentHeaders" :multiple="true" @change="attHandleChange" :showUploadList="false">
          <el-button type="primary" @click="attachmentVisible = false">确 定</el-button>
        </a-upload>
      </span>
    </el-dialog>
    <!-- 附件导入弹窗 -->

    <!-- 单个导入弹窗 -->
    <singleImportNew ref="singleImportNew" :importDataType="importDataType"></singleImportNew>
    <!-- 单个导入弹窗 -->

  </div>
</template>

<script>
import { Message } from 'element-ui'
import singleImportNew from './singleImportNew.vue'
export default {
  props: [
    'fileFlag',
    'importFlag',
    'importDataType',
    'headerOptions',
  ],
  components: {
    singleImportNew,
  },
  data() {
    return {
      downFileName: [],
      jyDownFileName: ['绝缘批量导入模板', '国内外相同牌号', '材料标签', '化学成分', '生产商', '生产商标签', '样品规格参数', '测试仪器信息', '软磁批量导入模板'],
      crDownFileName: ['传热批量导入模板', '国内外相同牌号', '材料标签', '化学成分', '生产商', '生产商标签', '样品规格参数', '测试仪器信息', '软磁批量导入模板'],
      cdDownFileName: ['超导批量导入模板', '国内外相同牌号', '材料标签', '化学成分', '生产商', '生产商标签', '样品规格参数', '测试仪器信息', '软磁批量导入模板'],
      jxDownFileName: ['机械批量导入模板', '国内外相同牌号', '材料标签', '化学成分', '生产商', '生产商标签', '样品规格参数', '测试仪器信息', '软磁批量导入模板'],
      importTag: false,
      // importFlag: '',
      // fileFlag: 0,
      uploadUrl: 'http://59.172.104.174:30669/user/uploadMeasurementByUser', //上传文件路径(批量导入——已有模板直接导入)
      attachmentUploadUrl: 'http://59.172.104.174:30669/user/uploadFile', //附件导入上传路径
      attachmentHeaders: { // 请求上传头部
        userId: JSON.parse(window.localStorage.getItem('pro__Login_Userinfo')).value.id,
        username: JSON.parse(window.localStorage.getItem('pro__Login_Userinfo')).value.username
      },
      paramData: {
        type: '软磁样品基本参数',
        userId: JSON.parse(window.localStorage.getItem('pro__Login_Userinfo')).value.id
      },
      attachmentParamData: {
        type: '软磁样品基本参数', // '软磁样品基本参数'
        remark: ''
      },
      attachmentVisible: false, // 附件导入弹框
      batchVisible: false, // 批量导入弹框
    }
  },
  mounted() {},
  methods: {
    showEdit() {
      Message({
        message: '程序员正在加班中！',
        center: true,
        customClass: 'myMessageClass'
      })
    },
    // 导入方式选择弹框
    showImport() {
      this.importTag = true  // 导入方式弹框选择
    },
    // 单个导入按钮
    showDataImport() {
      if (this.importFlag == '软磁批量导入模板') {
        //导入一条对话框
        // this.single()
        this.$emit('getTableColumn'); // 调用父组件——获取表头
        this.columnTitle = this.headerOptions
        if(this.columnTitle.leng == 0) {
          setTimeout(() => {
            this.showDataImport();
          },500);
        } else {
          console.log("showDataImport.columnTitle",this.columnTitle);
          this.$refs.singleImportNew.getEditRowAndColumn(this.columnTitle)
        }
      }
    },

    //批量导入————下载模板按钮
    exportData() {
      if (this.fileFlag === -1) return
      if (this.importDataType == '绝缘') {
        this.downFileName = this.jyDownFileName
      } else if (this.importDataType == '传热') {
        this.downFileName = this.crDownFileName
      } else if (this.importDataType == '超导') {
        this.downFileName = this.cdDownFileName
      } else if (this.importDataType == '机械') {
        this.downFileName = this.jxDownFileName
      }
      this.axios({
        baseURL: 'http://59.172.104.174:30669',
        url: `/admin/downLoadLessonFile?name=${this.downFileName[this.fileFlag]}`, // 指明具体性能
        method: 'GET',
        responseType: 'blob'
      }).then(res => {
        const blob = new Blob([res.data])
        const url = window.URL.createObjectURL(blob)
        const link = document.createElement('a')
        link.style.display = 'none'
        link.download = `${this.downFileName[this.fileFlag]}.xlsx` // 指明具体性能
        link.href = url
        link.click()
      })
    },
    //批量导入————已有模板直接导入按钮
    handleChange(info) { // 上传文件改变时的状态
      if (info.file.status == 'done') {
        if (info.file.response.code == 0) {
          this.batchVisible = false
          this.importTag = false
          Message({
            message: '批量导入成功！',
            type: 'success',
            center: true,
            customClass: 'myMessageClass'
          })
        } else {
          this.batchVisible = false
          this.importTag = false
          Message({
            message: '批量导入失败！',
            type: 'error',
            center: true,
            customClass: 'myMessageClass'
          })
        }
      }
    },
    // 附件导入——
    attHandleChange(info) {
      if (info.file.status == 'done') {
        if (info.file.response.code == 200) {
          this.importTag = false
          Message({
            message: '附件导入成功！',
            type: 'success',
            center: true,
            customClass: 'myMessageClass'
          })
        } else {
          this.importTag = false
          Message({
            message: '附件导入失败！',
            type: 'error',
            center: true,
            customClass: 'myMessageClass'
          })
        }
      }
    },
  }
}
</script>

<style lang="less">
.myMessageClass {
  z-index:5000 !important;
}
</style>
